<script setup lang="ts">
import setting from '@/utils/setting'
import { computed, ref } from 'vue'

const protocolReg = /^http(s?)/

const { size = '102', images } = defineProps<{
  images?: string[]
  size?: string
}>()

const index = ref(0)
const show = ref(false)

const previewImages = computed(() => {
  return images?.map((src) => ({ src: protocolReg.test(src) ? src : setting.host + src }))
})

const showPreview = (i: number) => {
  index.value = i
  show.value = true
}
</script>

<template>
  <div class="flex flex-wrap -ml-2">
    <template v-for="(item, index) in previewImages" :key="index">
      <div class="ml-2 mb-2">
        <nut-image
          :src="item.src"
          :width="size"
          :height="size"
          fit="contain"
          radius="12"
          @click="showPreview(index)"
        />
      </div>
    </template>
  </div>

  <nut-image-preview :show="show" :init-no="index" :images="previewImages" @close="show = false" />
</template>
